<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <meta name="format-detection" content="telephone=no">
    <link href="fonts/font-awesome.min.css" rel="stylesheet" />
    <link href="css/jquery.mloading.css" rel="stylesheet" />
    <link href="css/common.css" rel="stylesheet" />
    <title>e车险保</title>
    <style type="text/css">
        .title-box span{
            color: #d43c33;
        }
        .item:last-child{
            padding-right:0;
        }
        .fix{margin-top:-2px;
            height: 100%;}
        .fix input{
            width:10rem;
            height:100%;
            color:#fff;
            background: #0081CC;
            margin-left:10px;
        }
        .button{
            margin-top:1.82rem;
        }
        .fix input.active{
            background: #CCCCCC;
        }
        .box .item .left{
            flex: 1;
            -webkit-flex: 1;
        }
    </style>
</head>
<body class="bacc">
    <div id="ownerInfo" v-cloak>
        <div class="top-title">
            <div class="nav-left" @click="toBack"><i class="fa fa-angle-left" aria-hidden="true"></i></div>
            车主信息
        </div>
        <div class="box-box">
            <div class="box">
                <div class="title-box"><div class="title">车主信息<span>（请正确填写车主信息以便精准报价）</span></div></div>
                <div class="item">
                    <div class="left">车主姓名</div>
                    <div class="right"><input type="text"  placeholder="请输入车主姓名" required v-model="owner.ownerName" id="ownerName"></div>
                </div>
                <div class="item">
                    <div class="left">身份证号</div>
                    <div class="right"><input type="id"  placeholder="请输入身份证号" required v-model="owner.ownerID" id="ownerID"></div>
                </div>
                <div class="item">
                    <div class="left">手机号</div>
                    <div class="right"><input type="tel" name="tel" placeholder="请输入手机号" required v-model="owner.ownerMobile" id="ownerMobile"> </div>
                </div>
                <div class="item" style="padding-right: 0;">
                    <div class="left">验证码</div>
                    <div class="right"><input type="code" placeholder="请输入验证码" v-model="owner.verifyCode" id="verifyCode"> </div>
                    <div class="fix" ><input type="button"  @click="getCode(event.currentTarget,owner.ownerMobile)" v-model="code" style="border-radius: 0;"></div>
                </div>
                <input class="hide" v-model="owner.insuranceCode" readonly>
            </div>
            <div class="button">
                <input type="button" value="确定" id="submit" @click="submit()">
            </div>
        </div>
    </div>
    <div class="alert"></div>
</body>
</html>
<script src="js/jquery-1.11.2.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/jquery.mloading.js"></script>
<script src="js/common.js"></script>
<script>
    $(function(){
        var YDSF = JSON.parse(localStorage.getItem("YDSF"));
        var insuranceCode = YDSF.insuranceCode;

        var vm = new Vue({
            el:"#ownerInfo",
            data:{
                owner:{
                    insuranceCode:insuranceCode,
                    ownerID:"",
                    ownerMobile:"",
                    ownerName:"",
                    verifyCode:""
                },
                code:"获取验证码",
            },
            methods:{
                toBack:function(){
                    history.back(-1);
                },
                getCode:function(target,mobile){
                    if(vm.owner.ownerMobile == ""){
                        popInfo("手机号不能为空","#ownerMobile");
                        return;
                    }else{
                        if(!mobileReg.test(vm.owner.ownerMobile)){
                            popInfo("手机号格式不对","#ownerMobile");
                            return;
                        }
                    }
                    if($(target).hasClass("active")){
                        return;
                    }else{
                        toGetCode(mobile);
                        var time = 60;
                        $(target).addClass("active");
                        vm.code = time+"后重新获取";
                        var t = setInterval(function(){
                            if(--time >= 1){
                                vm.code = time+"s后重新获取";
                            }else{
                                vm.code = "获取验证码";
                                $(target).removeClass("active");
                                clearInterval(t);
                            }
                        },1000);
                    }
                },
                submit:function(){
                    var owner = vm.owner;
                    if(owner.ownerName.trim() == ''){
                        $(".alert").text("请输入车主姓名");
                        $(".alert").show();
                        setTimeout(function(){
                            $(".alert").hide();
                        },1000);
                        return;
                    }else if(!IDReg.test(owner.ownerID.trim())){
                        $(".alert").text("请输入正确的身份证号码");
                        $(".alert").show();
                        setTimeout(function(){
                            $(".alert").hide();
                        },1000);
                        return;
                    }else if(!mobileReg.test(owner.ownerMobile.trim())){
                        $(".alert").text("请输入正确的手机号");
                        $(".alert").show();
                        setTimeout(function(){
                            $(".alert").hide();
                        },1000);
                        return;
                    }else if(judgeIsNULL("#verifyCode")){
                        popInfo("验证码不能为空","#verifyCode");
                        return;
                    }
                    $("body").mLoading(config);
                    $.ajax({
                        url:ip+"/quote/accurate",
                        data:JSON.stringify(owner),
                        type:"post",
                        dataType:'json',
                        contentType : 'application/json',
                        success:function(data){
                           $("body").mLoading("hide");
                            if(data.code == "0000"){
                                if(data.data.quoteInfo.state == 1){
                                    var YDSF = JSON.parse(localStorage.getItem("YDSF"));
                                    console.log(data.data.quoteInfo);
                                    YDSF.JQBJ = data.data.quoteInfo.Data;
                                    YDSF.disCount = data.data.quoteInfo.disCount;
                                    YDSF.totalPremium = data.data.quoteInfo.totalPremium;
                                    localStorage.setItem("YDSF",JSON.stringify(YDSF));
                                    localStorage.setItem("YDSF_carInfo",JSON.stringify(data.data.carInfo));
                                    localStorage.setItem("YDSF_personInfo",JSON.stringify(data.data.personInfo));
                                    window.location.href="orderDetail.html";

                                }else if(data.data.quoteInfo.state == 0){
                                    popInfo(data.data.quoteInfo.msg);
                                }else{
                                    popInfo("网络异常，请稍后重试。");
                                }
                            }else if(data.code == "0002"){
                                popInfo("请求超时");
                            }else{
                                popInfo(data.msg);
                            }
                        },
                        error:function(xhr,textStatus){
                            $("body").mLoading("hide");
                            popInfo("网络异常，请稍后重试。");
                            console.log('错误');
                            console.log(xhr);
                            console.log(textStatus);
                        }
                    });
                }
            }
        });
    });


    function toGetCode(mobile){
        var url = ip + "/verify_code/send";
        $.ajax({
            type: "get",
            url: url,
            dataType: "json",
            data:{"mobile":mobile},
            contentType: "application/json; charset=utf-8",
            success:function(data){
                console.log(data);
                if(data.code == "0000"){
                    popInfo("验证码发送成功");
                }else{
                    popInfo(data.msg);
                }
            },
            error:function(xhr,textStatus){
                popInfo(xhr.responseText);
                console.log('错误');
                console.log(xhr);
                console.log(textStatus);
            }
        });
    }
</script>